拡張機能マニフェスト

すべての Visual Studio Code 拡張機能は、拡張機能ディレクトリ構造のルートにマニフェストファイル package.json が必要です。

フィールド

npm の package.json リファレンスも確認してください。

例

完全な package.json の例を以下に示します

{
  "name": "wordcount",
  "displayName": "Word Count",
  "version": "0.1.0",
  "publisher": "ms-vscode",
  "description": "Markdown Word Count Example - reports out the number of words in a Markdown file.",
  "author": {
    "name": "sean"
  },
  "categories": ["Other"],
  "icon": "images/icon.png",
  "galleryBanner": {
    "color": "#C80000",
    "theme": "dark"
  },
  "pricing": "Free",
  "activationEvents": ["onLanguage:markdown"],
  "engines": {
    "vscode": "^1.0.0"
  },
  "main": "./out/extension",
  "scripts": {
    "vscode:prepublish": "node ./node_modules/vscode/bin/compile",
    "compile": "node ./node_modules/vscode/bin/compile -watch -p ./"
  },
  "devDependencies": {
    "@types/vscode": "^0.10.x",
    "typescript": "^1.6.2"
  },
  "license": "SEE LICENSE IN LICENSE.txt",
  "bugs": {
    "url": "https://github.com/microsoft/vscode-wordcount/issues",
    "email": "sean@contoso.com"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/microsoft/vscode-wordcount.git"
  },
  "homepage": "https://github.com/microsoft/vscode-wordcount/blob/main/README.md"
}

Marketplace プレゼンテーションのヒント

VS Code Marketplace に表示されるときに拡張機能を素晴らしく見せるためのヒントと推奨事項をいくつか示します。

常に最新の vsce を使用してください。npm install -g @vscode/vsce を実行して、最新バージョンであることを確認してください。

拡張機能のルートフォルダーに README.md Markdown ファイルを含めてください。コンテンツを拡張機能の詳細 (Marketplace 上) の本文に含めます。README.md に相対パスの画像リンクを指定できます。

いくつかの例を以下に示します

1. Word Count
2. MD Tools

適切な表示名と説明を提供してください。これは Marketplace および製品表示で重要です。これらの文字列は VS Code でのテキスト検索にも使用され、関連するキーワードがあると非常に役立ちます。

    "displayName": "Word Count",
    "description": "Markdown Word Count Example - reports out the number of words in a Markdown file.",

アイコンとコントラストの強いバナーカラーは、Marketplace ページヘッダーで見栄えがよくなります。theme 属性は、バナーで使用するフォント (dark または light) を指します。

{
  "icon": "images/icon.png",
  "galleryBanner": {
    "color": "#C80000",
    "theme": "dark"
  }
}

設定できるオプションのリンク (bugs、homepage、repository) がいくつかあり、これらは Marketplace の リソース セクションの下に表示されます。

{
  "license": "SEE LICENSE IN LICENSE.txt",
  "homepage": "https://github.com/microsoft/vscode-wordcount/blob/main/README.md",
  "bugs": {
    "url": "https://github.com/microsoft/vscode-wordcount/issues",
    "email": "sean@contoso.com"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/microsoft/vscode-wordcount.git"
  }
}

拡張機能の category を設定します。同じ category の拡張機能は Marketplace でグループ化され、フィルタリングと検出が向上します。

注: 拡張機能に意味のある値のみを使用してください。許可される値は [プログラミング言語, スニペット, リンター, テーマ, デバッガー, フォーマッター, キーマップ, SCM プロバイダー, その他, 拡張機能パック, 言語パック, データサイエンス, 機械学習, 可視化, ノートブック, 教育, テスト] です。構文の強調表示やコード補完などの一般的な言語機能には プログラミング言語 を使用します。言語パック カテゴリは、表示言語拡張機能 (たとえば、ブルガリア語ローカライズ) 用に予約されています。

{
  "categories": ["Linters", "Programming Languages", "Other"]
}

承認済みバッジ

セキュリティ上の懸念から、信頼できるサービスからのバッジのみを許可しています。

次の URL プレフィックスからのバッジを許可します

• api.bintray.com
• api.travis-ci.com
• api.travis-ci.org
• app.fossa.io
• badge.buildkite.com
• badge.fury.io
• badge.waffle.io
• badgen.net
• badges.frapsoft.com
• badges.gitter.im
• badges.greenkeeper.io
• cdn.travis-ci.com
• cdn.travis-ci.org
• ci.appveyor.com
• circleci.com
• cla.opensource.microsoft.com
• codacy.com
• codeclimate.com
• codecov.io
• coveralls.io
• david-dm.org
• deepscan.io
• dev.azure.com
• docs.rs
• flat.badgen.net
• gemnasium.com
• github.com (ワークフローのみ)
• gitlab.com
• godoc.org
• goreportcard.com
• img.shields.io
• isitmaintained.com
• marketplace.visualstudio.com
• nodesecurity.io
• opencollective.com
• snyk.io
• travis-ci.com
• travis-ci.org
• visualstudio.com
• vsmarketplacebadges.dev
• www.versioneye.com

注: vsmarketplacebadge.apphb.com バッジを vsmarketplacebadges.dev バッジに置き換えてください。

使用したい他のバッジがある場合は、GitHub issue をオープンしてください。喜んで確認させていただきます。

拡張機能の機能拡張の組み合わせ

yo code ジェネレーターを使用すると、TextMate テーマ、カラライザー、スニペットを簡単にパッケージ化し、新しい拡張機能を作成できます。ジェネレーターを実行すると、オプションごとに完全なスタンドアロン拡張機能パッケージが作成されます。ただし、複数の機能を組み合わせた単一の拡張機能を使用する方が便利なことがよくあります。たとえば、新しい言語のサポートを追加する場合、色分けによる言語定義と、スニペット、さらにはデバッグのサポートもユーザーに提供したいと考えるでしょう。

拡張機能の機能を組み合わせるには、既存の拡張機能マニフェスト package.json を編集し、新しい機能と関連ファイルを追加します。

以下は、LaTex 言語定義 (言語識別子とファイル拡張子)、色分け (grammars)、およびスニペットを含む拡張機能マニフェストです。

{
  "name": "language-latex",
  "description": "LaTex Language Support",
  "version": "0.0.1",
  "publisher": "someone",
  "engines": {
    "vscode": "0.10.x"
  },
  "categories": ["Programming Languages", "Snippets"],
  "contributes": {
    "languages": [
      {
        "id": "latex",
        "aliases": ["LaTeX", "latex"],
        "extensions": [".tex"]
      }
    ],
    "grammars": [
      {
        "language": "latex",
        "scopeName": "text.tex.latex",
        "path": "./syntaxes/latex.tmLanguage.json"
      }
    ],
    "snippets": [
      {
        "language": "latex",
        "path": "./snippets/snippets.json"
      }
    ]
  }
}

拡張機能マニフェストの categories 属性に、Marketplace での簡単な検出とフィルタリングのために プログラミング言語 と スニペット の両方が含まれるようになったことに注意してください。

ヒント: マージされた機能拡張が同じ識別子を使用していることを確認してください。上記の例では、3 つの機能拡張すべてが言語識別子として "latex" を使用しています。これにより、VS Code はカラライザー (grammars) とスニペットが LaTeX 言語用であり、LaTeX ファイルを編集するときにアクティブになることを認識します。

拡張機能パック

個別の拡張機能を 拡張機能パック にまとめてバンドルできます。拡張機能パックは、一緒にインストールされる拡張機能のセットです。これにより、お気に入りの拡張機能を他のユーザーと簡単に共有したり、PHP 開発などの特定のシナリオ向けの拡張機能のセットを作成して、PHP 開発者が VS Code をすぐに使い始められるようにしたりできます。

拡張機能パックは、package.json ファイル内の extensionPack 属性を使用して他の拡張機能をバンドルします。

たとえば、以下はデバッガーと言語サービスを含む PHP 用の拡張機能パックです

{
  "extensionPack": ["xdebug.php-debug", "zobo.php-intellisense"]
}

拡張機能パックをインストールすると、VS Code はその拡張機能の依存関係もインストールするようになります。

拡張機能パックは、拡張機能パック Marketplace カテゴリに分類する必要があります

{
  "categories": ["Extension Packs"]
}

拡張機能パックを作成するには、yo code Yeoman ジェネレーターを使用して、新しい拡張機能パック オプションを選択します。現在 VS Code インスタンスにインストールされている拡張機能のセットでパックをシードするオプションがあります。これにより、お気に入りの拡張機能で拡張機能パックを簡単に作成し、Marketplace に公開して、他のユーザーと共有できます。

拡張機能パックは、バンドルされた拡張機能との機能的な依存関係を持つべきではなく、バンドルされた拡張機能はパックとは独立して管理できる必要があります。拡張機能が別の拡張機能に依存している場合、その依存関係は extensionDependencies 属性で宣言する必要があります。

拡張機能のアンインストールフック

拡張機能が VS Code からアンインストールされるときに実行する必要があるクリーンアップがある場合は、拡張機能の package.json の scripts セクションの下にアンインストールフック vscode:uninstall に node スクリプトを登録できます。

{
  "scripts": {
    "vscode:uninstall": "node ./out/src/lifecycle"
  }
}

このスクリプトは、拡張機能が VS Code から完全にアンインストールされたとき、つまり拡張機能がアンインストールされた後に VS Code が再起動 (シャットダウンと起動) されたときに実行されます。

注: Node.js スクリプトのみがサポートされています。

役立つ Node モジュール

VS Code 拡張機能の作成に役立つ Node.js モジュールが npmjs でいくつか利用可能です。これらを拡張機能の dependencies セクションに含めることができます。

• vscode-nls - 外部化とローカライズのサポート。
• vscode-uri - VS Code とその拡張機能で使用される URI 実装。
• jsonc-parser - コメントの有無にかかわらず JSON を処理するためのスキャナーとフォールトトレラントパーサー。
• request-light - プロキシサポートを備えた軽量 Node.js リクエストライブラリ
• vscode-extension-telemetry - VS Code 拡張機能の一貫したテレメトリーレポート。
• vscode-languageclient - 言語サーバープロトコルに準拠した言語サーバーを簡単に統合できます。

次のステップ

VS Code 拡張機能モデルの詳細については、次のトピックをお試しください

• 機能拡張ポイント - VS Code 機能拡張ポイントリファレンス
• アクティベーションイベント - VS Code アクティベーションイベントリファレンス
• 拡張機能 Marketplace - VS Code 拡張機能 Marketplace の詳細